import {useState} from 'react'
import Title from './tipsItem/Title'
import Strong from './tipsItem/Strong'
import List from './tipsItem/List'
import Link from './tipsItem/Link'
import Code from './tipsItem/Code'
import './index.less'
export default function HelpTips(){

  const [tipIndex,setTipIndex] = useState(0)

  const TipsArr = ['标题','文本样式','列表','链接','代码片段']

  const changeTip = (index)=>{
    setTipIndex(index)
  }

  let component = null

  switch(tipIndex){
    case 0:
      component = <Title />
      break
    case 1:
      component = <Strong />
      break
    case 2:
      component = <List />
      break
    case 3:
      component = <Link />
      break
    case 4:
      component = <Code />
      break
    default:
      break
  }

  return (
    <div className="Tips">
      <div>
        <p className="helpTitle">帮助文档</p>
        <ul className="wrap">
          {TipsArr.map((item,index)=>{
            return <li key={index} className={tipIndex===index?'selectThis':''}
            onClick={()=>{changeTip(index)}}>{item}</li>
          })}
        </ul>
        <div className="showTips">
          {component}
        </div>
      </div>
    </div>
  )
}